<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>机构信息</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			.van-cell{
				align-items: center;
			}
			.van-cell__title{
				font-weight: 300;
				width: 25%;
				flex: none;
			}
			.van-cell__value{
				color: rgba(62, 62, 62, 100);
				font-size: 14px;
				width: 75%;
				flex: none;
			}
			.van-cell-group--inset{
				margin: 0;
			}
		</style>
	</head>

	<body>
		<div id='app' v-cloak>
			<div class="id_background"></div>
			<div class="id_container">
				<div class="id_banner">
					<img :src="detail.orgIcon"/>
				</div>
				<div class="id_info">
					<van-cell-group inset>
						<van-cell>
							<template #title>
								<span class="custom-title"> 名称 </span>
							</template>
							<template #value>
								{{detail.orgName}}
							</template>
						</van-cell>
						<van-cell>
							<template #title>
								<span class="custom-title"> 地址 </span>
							</template>
							<template #value>
								{{detail.orgAddress}}
							</template>
						</van-cell>
						<van-cell>
							<template #title>
								<span class="custom-title"> 营业时间 </span>
							</template>
							<template #value>
								{{detail.openingTime}}-{{detail.closedTime}}
							</template>
						</van-cell>
						<van-cell>
							<template #title>
								<span class="custom-title"> 联系电话 </span>
							</template>
							<template #value>
								<div @click = 'call'>
									<span>{{detail.orgPhone}}</span>
									<img src="img/icon_phone.png" style="width: 20px;vertical-align: text-top;"/>
								</div>


							</template>
						</van-cell>
					</van-cell-group>
				</div>

				<div class="doctor_left_title">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">机构介绍</span>
				</div>
				<div class="id_detail">
					<img :src="detail.orgIntroduce" style="width: 100%;display: block;"/>
				</div>
			</div>
			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../base.js"></script>
	

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from "../common/js/api/vue3-axios-utils.js";

		import { linkIndex } from "../common/js/template/linkIndex.js"

		const PatientData = {
			data() {
				return {
					url: {
						getDetail:'/org/get'
					},
					detail:{},
					id:'',
				};
			},
			created() {
				this.init()
			},
			methods: {
				async init () {
					this.id = url('?id')
	                await this.handleGetDetail()

	                console.log('id',this.id)
	           	},
				handleGetDetail(){
					getAction(spliceUrl(this.url.getDetail),{id:this.id}).then((res) => {
						res = res.data
						console.log('handleGetDetail',res)
						if(res.success){
							this.detail = res.result
						}
					})
				},
				call(){
					console.log('call')
					window.location.href = 'tel://' + this.detail.orgPhone
				}
			},
			components:{
				linkIndex:linkIndex
			}
		};

		const app = Vue.createApp(PatientData);

		app.use(vant);

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload);

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount("#app");
	</script>

</html>

